<template>
  <view class="bg-1 p-t24 p-b4 p-r24 p-l4 salary-filter">
    <view class="tag-list">
      <view v-for="(tag, index) in list" :key="index" class="p-v20 m-b20 m-l20 flex-c tag"
        :class="[{ active: tag === selected }]" @click="select(tag)">
        <text>{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['change'])
const list = ref(['面议', '3000-5000', '5000-8000', '8000-12000'])

const selected = ref('')

const select = (val: string) => {
  if (selected.value === val) {
    selected.value = ''
  } else {
    selected.value = val
  }

  emit('change', selected.value)

}
</script>

<style lang="scss" scoped>
.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  height: 72rpx;
  padding: 0 20rpx;
  border-radius: 4rpx;
  font-size: 28rpx;
  color: $text-color-1;
  background-color: $bg-color-6;
  border: 1px solid transparent;

  &.active {
    font-weight: bold;
    color: $text-color-5;
    background-color: $bg-color-4;
    border-color: $border-color-1;
  }
}
</style>
